<!--
 * @Author: QUAN
 * @Date: 2021-09-23 15:13:49
 * @LastEditTime: 2021-11-19 11:56:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5\src\views\MyInfo\index.vue
-->
<template>
  <div class="job-detail">
    <!-- nav-bar -->
    <!-- <div class="my-nav-bar">
      <img src="../../assets/images/icon-share-black.png" @click="share" alt="" />
    </div> -->

    <!-- 详情信息 -->
    <div class="info">
      <p class="title">{{ data.title }}</p>
      <p class="price">
        <span>{{ data.showPrice }}</span>
        <span># {{ data.categoryName }}</span>
      </p>
      <div class="address-date">
        <img src="../../assets/images/location.png" class="location" alt="" />
        <span class="address">{{ data.city }}</span>
        <span class="address">|</span>
        <span class="address" v-if="!data.closed">{{ data.endDay }}截止</span>
        <span class="button" v-if="!data.closed">招募中</span>
        <span class="button finished" v-else>已截止</span>
      </div>
      <div class="avator-name">
        <div class="avator">
          <img :src="data.user && data.user.avatar ? data.user.avatar : ''" alt="" />
          <span>{{ data.user && data.user.nickname ? data.user.nickname : '' }}</span>
        </div>
        <span class="publish-date">{{ data.createdAt }}</span>
      </div>
      <div class="line"></div>
    </div>

    <!-- 需求的详情的描述 -->
    <div class="detail-describe">
      <h2>职位详情</h2>
      <div v-html="data.detail" class="detial-content" :class="{ isApp: $UA.isJM }"></div>
    </div>

    <!-- 联系他 -->
    <div class="contact-him" v-app-jump="{ to: toJM }" :class="{ inApp: $UA.isJM }">
      <img :src="data.user && data.user.avatar ? data.user.avatar : ''" alt="" />
      <span>联系TA</span>
    </div>

    <!-- 在app外打开app -->
    <bottom-open-app-adv v-if="!$UA.isJM" v-app-jump="{ to: toJM }"></bottom-open-app-adv>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Button, NavBar, Icon, Toast } from 'vant';
  import qs from 'qs';
  export default {
    components: {
      BottomOpenAppAdv,
      // 'van-button': Button,
      // 'van-nav-bar': NavBar,
      // 'van-icon': Icon,
    },
    data() {
      return {
        // 跳转到积幕里面的页面
        toJM: `mtjimu://webview?url=${encodeURIComponent(window.location.href)}`,
        data: '',
        id: qs.parse(window.location.search.replace(/^\?/, '')).id,
      };
    },
    mounted() {
      // 用自己的标题
      this.$appService.setNav({
        title: '招聘详情',
        fullscreen: true,
      });

      if (!this.id) {
        Toast('缺少ID');
        return;
      }
      // 得到数据
      this.getData();

      // PV上报
      this.$MutongPv.pv({
        pt: 'jm',
        pid: 'jobdetail',
        bid: this.id || '',
      });
    },
    methods: {
      // 分享
      share() {
        Toast('点击右上角分享吧！');
      },
      // 得到数据
      getData() {
        this.$service.MallJobDetail({ id: this.id }).then((res) => {
          this.data = res;

          // 微信分享
          wx.ready(() => {
            let _ = {
              title: this.data.title,
              subTitle: this.data.detail,
              url: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/jobdetail.html?id=${this.id}`,
              image: 'https://mutong-ketang-img.oss-cn-shanghai.aliyuncs.com/app/demand-share.jpg',
            };
            this.$setShareInfo({ ..._ });
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .job-detail {
    max-width: 75rem;
    min-height: 100vh;

    // nav-bar
    .my-nav-bar {
      position: fixed;
      top: 2rem;
      right: 1.9rem;
      width: 3.8rem;
      height: 3.8rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      -webkit-backdrop-filter: saturate(200%) blur(30px);
      backdrop-filter: saturate(200%) blur(30px);
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        z-index: -1;
        background-color: #f2f2f2;
        opacity: 0.54;
      }
      img {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
      }
    }

    // 详细信息
    .info {
      padding: 1.7rem 1.9rem 0rem;
      color: #111;
      .title {
        font-size: 22px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        display: flex;
        align-items: flex-end;
        margin-top: 1.5rem;
        font-size: 17px;
        font-family: DIN;
        font-weight: bold;
        color: #2247ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          &:nth-child(2) {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #111111;
            margin-left: 1.5rem;
          }
        }
      }
      .address-date {
        display: flex;
        align-items: center;
        margin-top: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .location {
          width: 1.2rem;
          height: 1.2rem;
        }
        .address {
          margin-left: 0.7rem;
          font-size: 14px;
          font-weight: 400;
          color: #888888;
        }
        .button {
          margin-left: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 3.8rem;
          height: 1.6rem;
          // line-height: 1.6rem;
          text-align: center;
          background: #00c284;
          border-radius: 2px;
          font-size: 10px;
          font-weight: 500;
          color: #ffffff;
        }
        .finished {
          background: #888;
        }
      }
      .avator-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .avator {
          display: flex;
          align-items: center;
          img {
            width: 2.3rem;
            height: 2.3rem;
            border-radius: 50%;
          }
          span {
            font-size: 14px;
            font-weight: 800;
            color: #111111;
            margin-left: 0.8rem;
          }
        }
        .publish-date {
          margin-top: 0.2rem;
          font-size: 14px;
          font-weight: 400;
          color: #888888;
        }
      }
      .line {
        margin-top: 1.7rem;
        width: 100%;
        height: 1px;
        background: #f3f3f3;
      }
    }

    // 需求详情
    .detail-describe {
      padding: 2.1rem 1.9rem 7rem;
      h2 {
        position: relative;
        font-size: 17px;
        font-weight: 800;
        color: #111111;
        &::after {
          content: '';
          position: absolute;
          top: 13px;
          left: 0;
          width: 68px;
          height: 11px;
          background: #888888;
          opacity: 0.1;
        }
      }
      .detial-content {
        margin-top: 2.7rem;
        margin-bottom: 8rem;
        font-size: 15px;
        font-weight: 400;
        color: #111111;
        opacity: 0.9;
        line-height: 24px;
        overflow: hidden;
      }
      .isApp {
        padding-bottom: 0.5rem;
      }
    }

    // 联系他
    .contact-him {
      position: fixed;
      right: 1.9rem;
      bottom: 9rem;
      width: 127px;
      height: 50px;
      border-radius: 25px;
      display: flex;
      align-items: center;
      overflow: hidden;
      -webkit-backdrop-filter: saturate(200%) blur(30px);
      backdrop-filter: saturate(200%) blur(30px);
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: #000;
        opacity: 0.54;
        box-shadow: 0px 17px 28px 0px rgba(0, 0, 0, 0.56);
      }
      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        margin-left: 0.5rem;
      }
      span {
        margin-left: 1.4rem;
        font-size: 14px;
        font-weight: 800;
        color: #ffffff;
      }
    }
    .inApp {
      bottom: 2.5rem;
    }
  }
</style>
